import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react'
import { Radio, Button } from '@alifd/next'
import { useMemoizedFn } from 'ahooks'
import { RedoOutlined, UndoOutlined } from '@ant-design/icons'
import styles from './index.module.scss'
const RadioGroup = Radio.Group

const BottomButtons = ({ setSwitchButtonState, setRotate, setSplitScreenState, updateRoomsNumAndLayoutData }, ref) => {
  const [buttonState, setButtonState] = useState('ugm图纸')
  const [displayState, setDisplayState] = useState(true)

  useEffect(() => {
    setSwitchButtonState(buttonState)
  }, [buttonState, setSwitchButtonState])

  const onChange = useMemoizedFn(checked => {
    setButtonState(checked)
  })

  const createBottomButtons = useMemoizedFn(() => {
    return (
      <>
        <Button
          type="primary"
          size="small"
          style={{ marginRight: '5px', width: '20px', padding: '0px', fontSize: '15px' }}
          onClick={() => setRotate(true)}
        >
          <UndoOutlined />
        </Button>
        <Button
          type="primary"
          size="small"
          style={{ marginRight: '20px', width: '20px', padding: '0px', fontSize: '15px' }}
          onClick={() => setRotate(false)}
        >
          <RedoOutlined />
        </Button>
        <RadioGroup shape="button" value={buttonState} onChange={onChange} aria-labelledby="groupId" size="small">
          <Radio id="ugm图纸" value="ugm图纸">
            ugm图纸
          </Radio>
          <Radio id="备份图纸" value="备份图纸">
            备份图纸
          </Radio>
          <Radio id="瑞信图纸" value="瑞信图纸">
            瑞信图纸
          </Radio>
        </RadioGroup>
        <Button
          type="primary"
          size="small"
          style={{ marginLeft: '20px', width: '45px', padding: '0px' }}
          onClick={setSplitScreenState}
        >
          分屏
        </Button>
        {buttonState === '瑞信图纸' ? (
          <Button
            type="primary"
            size="small"
            style={{ marginLeft: '20px', width: '70px', padding: '0px' }}
            onClick={updateRoomsNumAndLayoutData}
          >
            更新户型
          </Button>
        ) : null}
      </>
    )
  })

  useImperativeHandle(
    ref,
    () => ({
      setDisplayState: setDisplayState
    }),
    [setDisplayState]
  )
  return (
    <div className={styles.BottomButtons} style={{ display: displayState ? 'block' : 'none' }}>
      {createBottomButtons()}
    </div>
  )
}

export default forwardRef(BottomButtons)
